<script setup>
import { onMounted, reactive, ref } from 'vue';
import { Search, Delete, EditPen, Plus } from '@element-plus/icons-vue'
import SingleUpload from '@/components/upload/singleUpload.vue';
import { 
  saveAdvertiseApi, 
  getAdvertiseListApi, 
  getAdvertiseInfoApi, 
  updateAdvertiseInfoApi, 
  deleteAdvertiseApi
}from'@/apis/sms/advertise'

const uploadType = "advertise";
// 参数
const params = reactive({
  name: '',
  status: '',
  pageNum:1,
  pageSize:10,
})

const loading = ref(false)

// 获取数据
const advertiesData = ref({})
const getAdvertiseListData = async() => {
  loading.value = true
  const res = await getAdvertiseListApi(params)
  advertiesData.value = res.data
  loading.value = false
}

// 搜索
const handleSearch = () => {
  getAdvertiseListData()
}

// 重置
const handleRefresh = () => {
  params.name = '';
  params.status = '';
  getAdvertiseListData()
}


// 展示面板,标题
const dialogVisible = ref(false)
const title = ref('')

// 数据
const advertiseForm = ref({})
// 添加广告/修改
const handleAddOrUpdate =async(id) => {
  advertiseForm.value = {}
  if(id !== null){
    const res = await getAdvertiseInfoApi(id)
    advertiseForm.value = res.data
  }
  dialogVisible.value = true;
}

// 取消
const singleUploadComponent = ref();
const handleCancel = () => {
  if (advertiseForm.value.id === null || advertiseForm.value.id === '' || advertiseForm.value.id === void 0) {
    if (advertiseForm.value.logoUrl === null || advertiseForm.value.logoUrl === '' || advertiseForm.value.logoUrl === void 0) {
      dialogVisible.value = false;
    } else {
      // id为空,添加时点击取消，删除上传的图片
      singleUploadComponent.value.handleRemove();
      dialogVisible.value = false;
    }
  } else {
    // 修改点击取消，不能删除
    dialogVisible.value = false;
  }
}

// 确定
const handleConfirm = () => {
  // 没有id是添加
  if (advertiseForm.value.id === null || advertiseForm.value.id === '' || advertiseForm.value.id === void 0) {
    saveAdvertiseApi(advertiseForm.value)
    .then(res => {
      if(res.code === 0){
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
        getAdvertiseListData()
        dialogVisible.value = false;
      }
    })
  } else {
    // 有是修改
    updateAdvertiseInfoApi(advertiseForm.value)
    .then(res => {
      if(res.code === 0){
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        getAdvertiseListData()
        dialogVisible.value = false;
      }
    })
  }
}

// 修改上线状态
const updateStatus = (data) => {
  updateAdvertiseInfoApi(data)
    .then(res => {
      if(res.code === 0){
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        getAdvertiseListData()
        dialogVisible.value = false;
      }
    })
}

// 删除
const handleRemove = (id) => {
  ElMessageBox.confirm(
    '你确定要删除此广告吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      let ids = [id];
      deleteAdvertiseApi(ids)
        .then(res => {
          if (res.code === 0) {
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            getAdvertiseListData()
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

// 复选框
const ids = ref([])
const handleSelectionChange = (selection) => {
  let arr = []
  selection.forEach(el => {
    arr.push(el.id)
  })
  ids.value = arr
}

// 批量删除
const handleRemoves = () => {
  if(ids.value.length === 0){
    ElMessage({
      type: 'info',
      message: '没有要删除的广告',
    })
    return
  }
  ElMessageBox.confirm(
    '你确定要删除这些广告吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      deleteAdvertiseApi(ids.value)
        .then(res => {
          if (res.code === 0) {
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            getAdvertiseListData()
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

onMounted(() => {
  getAdvertiseListData()
})
</script>

<template>
  <div class="container" v-loading="loading">
    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <span style="display: inline-block;width: 70px;">广告名称</span>
        <el-input v-model="params.name" placeholder="请输入广告名称" clearable style="width: 280px;" />
        <span style="display: inline-block;width: 70px;margin-left: 10px;">广告状态</span>
        <el-select v-model="params.status" clearable placeholder="请选择广告状态" style="width: 280px;">
          <el-option :key="0" label="上线" :value="0" />
          <el-option :key="1" label="下线" :value="1" />
        </el-select>
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleSearch">搜索</el-button>
        <el-button @click="handleRefresh">重置</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <el-button type="primary" plain @click="handleAddOrUpdate(null)">添加广告</el-button>
        <el-button type="danger" plain @click="handleRemoves">批量删除</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="advertiesData.list" style="width: 100%" row-key="id" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="广告名" width="150" />
          <el-table-column prop="pic" label="广告图片" width="180" align="center">
            <template v-slot="scope">
              <div style="height: 75px;"><img :src="scope.row.pic" style="height: 100%;width: 100%;"></div>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" align="center"/>
          <el-table-column prop="endTime" label="结束时间" align="center"/>
          <el-table-column prop="status" label="状态" align="center">
            <template v-slot="scoped">
              <el-switch v-model="scoped.row.status" class="ml-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="0"
                :inactive-value="1" @change="updateStatus(scoped.row)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="235" fixed="right" align="center">
            <template v-slot="scoped">
              <el-button type="primary" text size="small" :icon="EditPen"
                @click="handleAddOrUpdate(scoped.row.id)">修改</el-button>
              <el-button type="primary" text size="small" :icon="Delete"
                @click="handleRemove(scoped.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>

  <el-dialog v-model="dialogVisible" :title="title" style="width: 55%;">
    <el-form style="width: 96%;" :model="advertiseForm" :rules="rules" status-icon label-width="90px">
      <el-form-item label="广告名" prop="name">
        <el-input v-model="advertiseForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="advertiseForm.startTime"
          type="date"
          placeholder="请选择开始时间"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="advertiseForm.endTime"
          type="date"
          placeholder="请选择结束时间"
        />
      </el-form-item>
      <el-form-item label="是否上线" prop="visible">
        <el-switch v-model="advertiseForm.status" class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="0" :inactive-value="1" />
      </el-form-item>
      <el-form-item label="广告图片" prop="pic">
        <SingleUpload v-model:picture="advertiseForm.pic" :uploadType="uploadType" :width="280" :height="160"
          ref="singleUploadComponent"></SingleUpload>
      </el-form-item>
      <el-form-item label="广告链接" prop="url">
        <el-input v-model="advertiseForm.url" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="advertiseForm.sort" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="advertiseForm.note" type="textarea"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang='scss'>

</style>